<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自适应显示多个点标记</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .info-tip {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            background-color: #fff;
            height: 35px;
            text-align: left;
        }
    </style>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=c65567e0b0ab1061be38a684f56dbdba"></script>

    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
    <input id="setFitView" class="button" type="button" value="地图自适应显示"/>
</div>
<div class="info-tip">
    <div id="centerCoord"></div>
    <div id="tips"></div>
</div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [110.397428, 32.90923],
        zoom: 4
    });
    map.clearMap();  // 清除地图覆盖物
    var markers = [{
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
        position: [116.205467, 39.907761]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
        position: [116.368904, 39.913423]
    }, {
        icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
        position: [116.305467, 39.807761]
    }];

    function mapShaine(location,name) {
        //加载行政区划插件
        AMap.service('AMap.DistrictSearch', function() {
            var opts = {
                subdistrict: 1,   //返回下一级行政区
                extensions: 'all',  //返回行政区边界坐标组等具体信息
                level: 'city'  //查询行政级别为 市
            };
            //实例化DistrictSearch
            district = new AMap.DistrictSearch(opts);
            district.setLevel('district');
            //行政区查询
            district.search('南京', function(status, result) {
              console.log(name);
              var r,g,b,color
              r = Math.floor(Math.random()*255);
              g = Math.floor(Math.random()*255);
              b = Math.floor(Math.random()*255);
              color = 'rgba('+ r +','+ g +','+ b +',0.8)';

              var marker = {
                position_x:result.districtList[0].center.lat,
                position_y:result.districtList[0].center.lng,
                // content:'<div style="background-color: #30BBEC; height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">'+ +'</div>'
                content:'<span style="color:white;background-color:'+ color+';">'+name+'</span>'
              };

              console.log(marker);
            marker =   new AMap.Marker({
                        map: map,
                        content: marker.content,
                        position: [marker.position_y, marker.position_x],
                        offset: new AMap.Pixel(-12, -36)
                    });

                    // setTimeout(function(){
                    //   marker.setMap(null);
                    // },5000)
                //var bounds = result.districtList[0].boundaries;
                // var polygons = [];
                // if (bounds) {
                //     for (var i = 0, l = bounds.length; i < l; i++) {
                //         //生成行政区划polygon
                //         var polygon = new AMap.Polygon({
                //             map: map,
                //             strokeWeight: 1,
                //             path: bounds[i],
                //             fillOpacity: 0.7,
                //             fillColor: '#CCF3FF',
                //             strokeColor: '#CC66CC'
                //         });
                //         polygons.push(polygon);
                //     }
                //   //  map.setFitView();//地图自适应
                // }
            });
        });
    }


</script>
<script type="text/javascript">
function link(){
          var url='ws://127.0.0.1:9501';
          socket=new WebSocket(url);
          socket.onopen=function(){}
          socket.onmessage=function(msg){
          console.log(msg.data);
          m = JSON.parse(msg.data);
          if(!m.from.city){
            loaction = m.from.Province
          }else{
            loaction = m.from.city
          }
          var name = m.from.NickName
          mapShaine(loaction,name)
          console.log(m)
          }
          // socket.onclose=function(){log('断开连接')}

      }

link();
</script>
<style media="screen">
  .amap-marker-content{width:1000px}
</style>
</body>
</html>
